<template>
    <div class="main">
        <el-form ref="form" class="form" :model="form">
            <el-form-item label="用户名">
                <el-input v-model="form.username"/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register">提交</el-button>
                <el-button type="plain">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {storage} from "@/utils/common"

    export default {
        name: "register",
        data() {
            return {
                form: {
                    username: "",
                    password: ""
                }
            }
        },
        methods: {
            async register() {
                this.$openLoading({background: "rgba(0,0,0,0.1)"})
                let res = await this.$api.post("/auth/register", this.form)
                    .catch(e => {
                        this.$message.error(e.msg)
                    })
                    .finally(() => this.$closeLoading())
                if (!res) return
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    storage().set("token", res.data.token)
                    this.$router.push("/")
                } else {
                    this.$message.warning(res.msg)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .main {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .form {
            width: 300px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            padding: 30px;
        }
    }
</style>
